<template>
    <div class="pet-profile">
        <div style="display: flex; flex-wrap: wrap; gap: 10px;margin: 10px;" class="coverImg">
            <img class="pet_cover_imgs"
                 v-for="(item, index) in petInfo"
                 :key="index"
                 :src="item.coverImg"
                 @click="changeIndex(index)"
            />
        </div>
        <div class="pet-info-module">
            <div class="pet-info">
                <img :src="chosePet.mainImg" alt="Pet Image" class="pet-image">
                <div class="pet-details">
                    <h2>{{ chosePet.petName }}</h2>
                    <p>品种: {{ chosePet.specis }}</p>
                    <p>年龄: {{ chosePet.age }}岁</p>
                    <p>性别: {{ chosePet.gender === 0 ? '公' : '母' }}</p>
                </div>
            </div>
        </div>
        <div class="latest-checkup-module">
            <h3>最新体检结果</h3>
            <div class="checkup-modules">
                <div class="module">
                    <div class="module-header">体重</div>
                    <div class="module-value">{{ lastRecord.weight }}</div>
                </div>
                <div class="module">
                    <div class="module-header">体温</div>
                    <div class="module-value">{{ lastRecord.temperature }}</div>
                </div>
                <div class="module">
                    <div class="module-header">心率</div>
                    <div class="module-value" :class="{'red':true}">{{ lastRecord.heartRate }}</div>
                </div>
                <div class="module">
                    <div class="module-header">呼吸频率</div>
                    <div class="module-value">{{ lastRecord.respiratoryRate }}</div>
                </div>
            </div>
            <div class="doctor-info">
                <p>主治医生: {{ lastRecord.docName }}</p>
                <p>诊所: {{ lastRecord.hospital }}</p>
            </div>
            <div class="button-container">
                <button class="detail-report-btn" @click="viewDetailedReport">查看详细报告</button>
            </div>
        </div>
        <div class="checkup-history-module">
            <h3>体检历史</h3>
            <ul>
                <li v-for="(item, index) in record" :key="index">
                    <div style="display: flex">
                        <div class="checkup-date" style="width: 15%">{{ item.createdAt }}</div>
                        <div style="width: 80%">
                            <div class="checkup-type" style="font-weight: bolder;font-size: larger">{{
                                item.healthResult
                                }}
                            </div>
                            <div class="checkup-doctor" style="font-weight: lighter">{{ item.docName }} |
                                {{ item.hospital }}
                            </div>
                            <div class="checkup-notes">{{ item.diagResult }}</div>
                        </div>
                        <button class="detail-btn" @click="viewDetailedReport2(item)" style="width: 10%">查看详情</button>

                    </div>


                    <!--                    <div class="checkup-date">{{ item.createdAt }}</div>-->
                    <!--                    <div class="checkup-type">{{ item.healthResult }}</div>-->
                    <!--                    <div class="checkup-doctor">{{ item.doctor }}</div>-->
                    <!--                    <div class="checkup-notes">{{ item.notes }}</div>-->
                    <!--                    <button class="detail-btn" @click="viewDetailedReport">查看详情</button>-->
                </li>
            </ul>
        </div>
        <el-dialog v-if="dialogVisible" v-model="dialogVisible">
            <el-container>
                <el-header>
                    <h2>体检报告</h2>
                    <p>登记号：PET{{ lastRecord.reportTime }}</p>
                    <p>创建时间：{{ lastRecord.createdAt }}</p>
                    <el-tag type="success">健康</el-tag>
                </el-header>

                <el-main style="margin-top: 50px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <div>体重</div>
                                <div> {{ lastRecord.weight }}kg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>体温</div>
                                <div>{{ lastRecord.temperature }}°C</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>心率</div>
                                <div>{{ lastRecord.heartRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>呼吸频率</div>
                                <div>{{ lastRecord.respiratoryRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-card>
                                <div>血压</div>
                                <div>{{ lastRecord.bloodPressure }} mmHg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>身高</div>
                                <div>{{ lastRecord.height }}cm</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-collapse>
                        <el-collapse-item title="血液检查结果" name="1">
                            <div>{{ lastRecord.bloodtestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="尿液检查结果" name="2">
                            <div>{{ lastRecord.urinetestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="X光检查结果" name="3">
                            <div>{{ lastRecord.xrayResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="超声波结果" name="4">
                            <div>{{ lastRecord.ultrasoundResults }}</div>
                        </el-collapse-item>
                    </el-collapse>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-card>
                        <h3>诊断结果</h3>
                        <p>
                            {{ lastRecord.diagResult }}
                        </p>
                        <h3>治疗方案</h3>
                        <p>
                            {{ lastRecord.treatmentPlan }}
                        </p>
                        <h3>备注</h3>
                        <p>
                            {{ lastRecord.notes }}
                        </p>
                    </el-card>
                </el-main>
            </el-container>
        </el-dialog>
        <el-dialog v-if="dialogVisible2" v-model="dialogVisible2">
            <el-container>
                <el-header>
                    <h2>体检报告</h2>
                    <p>登记号：PET{{ formReport.reportTime }}</p>
                    <p>创建时间：{{ formReport.createdAt }}</p>
                    <el-tag type="success">健康</el-tag>
                </el-header>

                <el-main style="margin-top: 50px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <div>体重</div>
                                <div> {{ formReport.weight }}kg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>体温</div>
                                <div>{{ formReport.temperature }}°C</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>心率</div>
                                <div>{{ formReport.heartRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>呼吸频率</div>
                                <div>{{ formReport.respiratoryRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-card>
                                <div>血压</div>
                                <div>{{ formReport.bloodPressure }} mmHg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>身高</div>
                                <div>{{ formReport.height }}cm</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-collapse>
                        <el-collapse-item title="血液检查结果" name="1">
                            <div>{{ formReport.bloodtestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="尿液检查结果" name="2">
                            <div>{{ formReport.urinetestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="X光检查结果" name="3">
                            <div>{{ formReport.xrayResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="超声波结果" name="4">
                            <div>{{ formReport.ultrasoundResults }}</div>
                        </el-collapse-item>
                    </el-collapse>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-card>
                        <h3>诊断结果</h3>
                        <p>
                            {{ formReport.diagResult }}
                        </p>
                        <h3>治疗方案</h3>
                        <p>
                            {{ formReport.treatmentPlan }}
                        </p>
                        <h3>备注</h3>
                        <p>
                            {{ formReport.notes }}
                        </p>
                    </el-card>
                </el-main>
            </el-container>
        </el-dialog>

    </div>
</template>

<script>
import {getPetHealthExaminationRecordList, getPetListAPI} from "@/api/petApi";
import {parseTime2, parseTime4} from "@/utils/timeUtil";

export default {
    data() {
        return {
            dialogVisible: false,
            dialogVisible2: false,
            selected: 0,
            petInfo: [],
            chosePet: {},
            record: [],
            lastRecord: {},
            choseIndex: 0,
            formReport: {}
        }
    },
    methods: {
        viewDetailedReport() {
            this.dialogVisible = true
        }, viewDetailedReport2(item) {
            this.formReport = item
            this.dialogVisible2 = true
        },
        getRecordList() {
            getPetHealthExaminationRecordList(this.chosePet.petId).then(res => {
                this.record = res.data
                this.record.forEach(v => {
                    v.reportTime = parseTime4(v.createdAt)
                    v.createdAt = parseTime2(v.createdAt)
                })
                this.lastRecord = this.record[this.record.length - 1]
            })
        },
        changeIndex(index = 0) {
            this.selected = index
            this.chosePet = this.petInfo[index]
            this.getRecordList()
        },
        getPetList() {
            getPetListAPI().then(res => {
                this.petInfo = res.data
                this.changeIndex()
            });
        }
    }, mounted() {
        this.getPetList()
    }
}
</script>

<style scoped>
.pet-profile {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: 20px auto;
}

.pet-info-module, .latest-checkup-module, .checkup-history-module {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pet-info {
    display: flex;
    align-items: center;
}

.pet-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #f0f0f0;
    margin-right: 20px;
}

.pet-details h2 {
    margin: 0;
}

.checkup-modules {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.module {
    width: 23%;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.module-header {
    font-weight: bold;
    color: #555;
}

.module-value {
    font-size: 24px;
    color: #333;
}

.module-value.red {
    color: red;
}

.doctor-info {
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}

.button-container {
    text-align: right;
}

.detail-report-btn, .detail-btn {
    height: 40px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.detail-report-btn:hover, .detail-btn:hover {
    background-color: #0056b3;
}

.checkup-history-module ul {
    list-style-type: none;
    padding: 0;
}

.checkup-history-module li {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.checkup-date, .checkup-type, .checkup-doctor, .checkup-notes {
    margin-bottom: 5px;
    color: #555;
}

.coverImg {
    overflow: hidden; /* 隐藏超出部分 */
}

.pet_cover_imgs:hover {
    transform: translateY(0);
}

.pet_cover_imgs:not(:hover) {
    transform: translateY(-25px);
}

.pet_cover_imgs {
    object-fit: cover;
    height: 45px;
    width: 45px;
    border-radius: 20px;
    border: #a7b1bb solid 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 90ms ease;
}

.pet_cover_imgs:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: height 300ms ease, transform 300ms ease; /* 过渡动画 */

}
</style>